<template>
  <div v-show="active" @click="closeHovers" class="overlay"></div>

  <!--  <nav :class="{ active }">-->
  <!--    <template v-if="isLoggedIn">-->
  <!--      <button-->
  <!--        class="action"-->
  <!--        @click="toRoot"-->
  <!--        :aria-label="$t('sidebar.myFiles')"-->
  <!--        :title="$t('sidebar.myFiles')"-->
  <!--      >-->
  <!--        &lt;!&ndash;        <i class="material-icons">folder</i>&ndash;&gt;-->
  <!--        <el-icon style="vertical-align: middle">-->
  <!--          <Folder />-->
  <!--        </el-icon>-->
  <!--        <span>{{ $t("sidebar.myFiles") }}</span>-->
  <!--      </button>-->

  <!--      <div v-if="user.perm.create">-->
  <!--        <button-->
  <!--          @click="showHover('newDir')"-->
  <!--          class="action"-->
  <!--          :aria-label="$t('sidebar.newFolder')"-->
  <!--          :title="$t('sidebar.newFolder')"-->
  <!--        >-->
  <!--          &lt;!&ndash;          <i class="material-icons">create_new_folder</i>&ndash;&gt;-->
  <!--          <el-icon style="vertical-align: middle">-->
  <!--            <FolderAdd />-->
  <!--          </el-icon>-->
  <!--          <span>{{ $t("sidebar.newFolder") }}</span>-->
  <!--        </button>-->

  <!--        &lt;!&ndash;        <button&ndash;&gt;-->
  <!--        &lt;!&ndash;          @click="showHover('newFile')"&ndash;&gt;-->
  <!--        &lt;!&ndash;          class="action"&ndash;&gt;-->
  <!--        &lt;!&ndash;          :aria-label="$t('sidebar.newFile')"&ndash;&gt;-->
  <!--        &lt;!&ndash;          :title="$t('sidebar.newFile')"&ndash;&gt;-->
  <!--        &lt;!&ndash;        >&ndash;&gt;-->
  <!--        &lt;!&ndash;          <i class="material-icons">note_add</i>&ndash;&gt;-->
  <!--        &lt;!&ndash;          <span>{{ $t("sidebar.newFile") }}</span>&ndash;&gt;-->
  <!--        &lt;!&ndash;        </button>&ndash;&gt;-->
  <!--      </div>-->

  <!--      <div>-->
  <!--        <button-->
  <!--          class="action"-->
  <!--          @click="toSettings"-->
  <!--          :aria-label="$t('sidebar.settings')"-->
  <!--          :title="$t('sidebar.settings')"-->
  <!--        >-->
  <!--          &lt;!&ndash;          <i class="material-icons">settings_applications</i>&ndash;&gt;-->
  <!--          <el-icon style="vertical-align: middle">-->
  <!--            <Setting />-->
  <!--          </el-icon>-->
  <!--          <span>{{ $t("sidebar.settings") }}</span>-->
  <!--        </button>-->
  <!--      </div>-->
  <!--    </template>-->
  <!--    <template v-else>-->
  <!--      <router-link-->
  <!--        class="action"-->
  <!--        to="/login"-->
  <!--        :aria-label="$t('sidebar.login')"-->
  <!--        :title="$t('sidebar.login')"-->
  <!--      >-->
  <!--        <i class="material-icons">exit_to_app</i>-->
  <!--        <span>{{ $t("sidebar.login") }}</span>-->
  <!--      </router-link>-->

  <!--      <router-link-->
  <!--        v-if="signup"-->
  <!--        class="action"-->
  <!--        to="/login"-->
  <!--        :aria-label="$t('sidebar.signup')"-->
  <!--        :title="$t('sidebar.signup')"-->
  <!--      >-->
  <!--        <i class="material-icons">person_add</i>-->
  <!--        <span>{{ $t("sidebar.signup") }}</span>-->
  <!--      </router-link>-->
  <!--    </template>-->
  <!--  </nav>-->
  <div class="menu">
    <el-menu
      :default-active="activeMenu"
      class="el-menu-vertical-demo"
      :router="true"
    >
      <el-menu-item
        index="/files"
        @click="toRoot"
        style="display: flex; align-items: center"
      >
        <el-icon>
          <Folder />
        </el-icon>
        <template #title>
          <div style="margin-top: 2px">
            {{ $t("sidebar.myFiles") }}
          </div>
        </template>
      </el-menu-item>
      <!--      <el-menu-item index="2" @click="showHover('newDir')">-->
      <!--        <el-icon>-->
      <!--          <FolderAdd />-->
      <!--        </el-icon>-->
      <!--        <template #title>{{ $t("sidebar.newFolder") }}</template>-->
      <!--      </el-menu-item>-->
      <el-menu-item index="/settings/shares" @click="toSettings">
        <el-icon>
          <Setting />
        </el-icon>
        <template #title>
          <div style="margin-top: 2px">分享管理</div>
        </template>
      </el-menu-item>
    </el-menu>
    <div
      class="credits"
      v-if="isFiles && !disableUsedPercentage"
      style="width: 90%; margin: 2em 2.5em 3em 2.5em"
    >
      <!--      <progress-bar :val="usage.usedPercentage" size="small"></progress-bar>-->
      <el-progress
        :stroke-width="10"
        :percentage="usage.usedPercentage"
        style="margin-top: 1em; border: none; font-size: 14px"
      />
      <br />
      已使用 {{ usage.used }} 总容量 {{ usage.total }}
    </div>
  </div>
</template>

<script>
import { computed, reactive } from "vue";
import { mapActions, mapState } from "pinia";
import { useAuthStore } from "@/stores/auth";
import { useFileStore } from "@/stores/file";
import { useLayoutStore } from "@/stores/layout";
import { Folder } from "@element-plus/icons-vue";
import * as auth from "@/utils/auth";
import {
  disableExternal,
  disableUsedPercentage,
  loginPage,
  noAuth,
  signup,
  version,
} from "@/utils/constants";
import { files as api } from "@/api";
import ProgressBar from "@/components/ProgressBar.vue";
import prettyBytes from "pretty-bytes";
import { useRoute } from "vue-router";

const route = useRoute();
// 动态设置默认选中的菜单项
const USAGE_DEFAULT = { used: "0 B", total: "0 B", usedPercentage: 0 };

export default {
  name: "sidebar",
  setup() {
    const usage = reactive(USAGE_DEFAULT);
    const route = useRoute(); // 使用 useRoute 获取当前路由

    const activeMenu = computed(() => {
      // 获取当前路由路径，并作为 :default-active 的值
      return route.path;
    });
    return { usage, activeMenu };
  },
  components: {
    Folder,
    ProgressBar,
  },
  inject: ["$showError"],
  computed: {
    ...mapState(useAuthStore, ["user", "isLoggedIn"]),
    ...mapState(useFileStore, ["isFiles", "reload"]),
    ...mapState(useLayoutStore, ["currentPromptName"]),
    active() {
      return this.currentPromptName === "sidebar";
    },
    signup: () => signup,
    version: () => version,
    disableExternal: () => disableExternal,
    disableUsedPercentage: () => disableUsedPercentage,
    canLogout: () => !noAuth && loginPage,
  },
  methods: {
    ...mapActions(useLayoutStore, ["closeHovers", "showHover"]),
    async fetchUsage() {
      const path = this.$route.path.endsWith("/")
        ? this.$route.path
        : this.$route.path + "/";
      let usageStats = USAGE_DEFAULT;
      if (this.disableUsedPercentage) {
        return Object.assign(this.usage, usageStats);
      }
      try {
        const usage = await api.usage(path);
        usageStats = {
          used: prettyBytes(usage.used, { binary: true }),
          total: prettyBytes(usage.total, { binary: true }),
          usedPercentage: Math.round((usage.used / usage.total) * 100),
        };
      } catch (error) {
        this.$showError(error);
      }
      return Object.assign(this.usage, usageStats);
    },
    toRoot() {
      this.$router.push({ path: "/files" });
      this.closeHovers();
    },
    toSettings() {
      this.$router.push({ path: "/settings" });
      this.closeHovers();
    },
    help() {
      this.showHover("help");
    },
    logout: auth.logout,
  },
  watch: {
    $route: {
      handler(to) {
        if (to.path.includes("/files")) {
          this.fetchUsage();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style scoped>
.menu {
  width: 16em;
  position: fixed;
  top: 4em;
  left: 0;
  height: calc(100% - 120px);
  border-right: 1px solid #dcdfe6;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

:deep(.el-menu) {
  border: none;
}
</style>
